<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">
    <script th:src="@{/static/layui/layui.js}"></script>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <script th:src="@{/static/echarts.js}"></script>
</head>
<body>

<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">吞吐量分析</div>
                <div class="layui-card-body">
                    <div id="avgTimeShow" style="height: 600px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">吞吐量</div>
                <div class="layui-card-body">
                    <div id="avgTimeText" style="height: 300px;">
                        <p>吞吐量表示的是单位时间内生产的区块数量，每个区块都包含了对应的交易信息， 因此吞吐量是一个衡量区块链并发能力的重要指标，反映了对应区块链处理交易速度的快慢。</p><br/>
                        <p>DPoSPT和DPoS算法均是在规定时间内由见证人节点产生区块，因此理论上在相同时间内产生的区块数量是相同的，但是由于系统中存在一定数量的恶意节点，所以产生的有效区块数量存在着一定差距。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">吞吐量分析</div>
                <div class="layui-card-body">
                    <div id="avgTime" style="height: 300px;">
                        <p>随着共识次数的增长，DPoSPT 算法生产的有效区块数量多于 DPoS 算法，因此DPoSPT保留了DPoS算法高吞吐量的特点且有些许提升，
                            而对于PoS和PoW等传统共识算法来说，DPoSPT在吞吐量有着更加显著的优势。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript" type="text/javascript" charset="UTF-8">
    layui.config({
        base: '/static/lib/' //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(["echarts","ecStat"],
        function() {
            var $ = layui.jquery,
                element = layui.element,
                echarts = layui.echarts,
                alg = [[${session.alg}]],

                option1 = {
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: [alg, 'DPOS']
                    },
                    xAxis: {
                        name: '共识次数',
                        type: 'category',
                        //data: [[${runRounds}]],
                        data: [50,100,150,200,250,300],
                        tooltip: {
                            valueFormatter: function (value) {
                                return '共识次数：'+value;
                            }
                        },
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '有效区块数量',
                        min: 0,
                        max: 300,
                        interval: 50,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value.toFixed(4) + ' ms';
                            }
                        },
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    series: [{
                        name: alg,
                        data:  [43.8, 88.6, 143. , 189.2, 237.6, 286.6],
                        //  data: [[${DposptData}]],
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value.toFixed(4) + ' ms';
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#66cc99'
                            }
                        },
                        barMaxWidth: '50'
                    },
                        {
                            name: 'DPOS',
                            // data: [[${PbftData}]],
                            data: [ 44.2,  80.4, 130.4, 160.8, 206.2, 252.8],
                            type: 'bar',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value.toFixed(4) + ' ms';
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#FFFFcc'
                                }
                            },
                            barMaxWidth: '50'
                        }]
                };
            mychart1 = echarts.init(document.getElementById('avgTimeShow'));
            mychart1.setOption(option1, true)

        }
    );
</script>
</body>
</html>
